<div class="w-full flex-grow text-black z-20 mt-2 md:mt-0 md:-mt-2.5  bg-white h-full overflow-y-scroll md:overflow-y-visible fixed md:static left-0 top-11 bg-yellow md:bg-transparent hidden md:block" :class="{'block': menuIsOpen, 'hidden md:inline-block': !menuIsOpen}">
  <ul class="list-reset text-center md:text-left mt-20 md:mt-0">
    {% for item in items %}
      <li>
        <div class="p-2 my-2.5 uppercase font-bold">
          {{ item.title }}
        </div>
        {% if item.below is not empty %}
          <ul class="list-reset mb-7">
            {% for sub_item in item.below %}
              <li class="mb-2">
                <a class="p-2 inline-block text-gray-600 hover:text-gray-900 hover:underline {% if (current_path == sub_item.url) %} bg-teal-300 {% endif %}" href="{{ sub_item.url }}">{{ sub_item.title }}</a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
